<template>
  <div class="menu-list" v-if="isContMenu" :style="getStyle">
    <div class="list" @click="addChild">
      <i class="el-icon-circle-plus-outline"></i>
      <span>添加子分类</span>
    </div>
    <div class="list" @click="delClick" v-if="!(widget.children&&widget.children.length>0)">
      <i class="el-icon-delete"></i>
      <span>删除</span>
    </div>
  </div>
</template>

<script>
  import ala from 'ala'
  export default {
    data () {
      return {
        isContMenu: false,
        getStyle: '',
        widget: ''
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init () {
        window.addEventListener('click', res => {
          this.isContMenu = false
        }, true)
        window.addEventListener('contextmenu', res => {
          if (this.isContMenu) {
            this.isContMenu = false
          }
        }, true)
      },
      contextmenu (ev, data) {
        this.widget = data
        this.getStyle = `top:${ev.y}px;left:${ev.x}px;`
        this.isContMenu = true
      },
      addChild () {
        this.$emit('addWiki', this.widget)
      },
      delClick () {
        this.$emit('deleteWiki', this.widget)
      }
    }
  }
</script>


<style lang="scss" scoped>
  .menu-list {
    position: absolute;
    top: 100px;
    left: 100px;
    background: #ffffff;
    box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.1);
    width: 120px;
    z-index: 999999;
    .list {
      height: 35px;
      line-height: 35px;
      text-align: center;
      display: flex;
      align-items: center;
      cursor: pointer;
      &:hover {
        background: #e9f3ff;
      }
      i {
        margin: 0 10px;
        margin-right: 5px;
        font-size: 14px;
      }
    }
  }
</style>
